<template>
  <div class="main">
    <div class="center">
      <div class="info">
        <div class="lf">
          <el-image lazy :src="starDetailData.avator" alt="" srcset="" />
        </div>
        <div class="rt">
          <div class="row-two">
            <div class="row">
              <div class="title">中文名</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.name }}</div>
            </div>
            <div class="row">
              <div class="title">外文名</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.english_name }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">别名</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.nickname }}</div>
            </div>
            <div class="row">
              <div class="title">国籍</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.nationality }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">民族</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.nation }}</div>
            </div>
            <div class="row">
              <div class="title">出生地</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.birth_location }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">出生日期</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.birthday }}</div>
            </div>
            <div class="row">
              <div class="title">身高</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.stature }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">体重</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.weight }}</div>
            </div>
            <div class="row">
              <div class="title">星座</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.constellation }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">血型</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.blood_type }}</div>
            </div>
            <div class="row">
              <div class="title">影视成就</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.achievement }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">职业</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.job }}</div>
            </div>
            <div class="row">
              <div class="title">毕业院校</div>
              <div class="dian">：</div>
              <div class="text">{{ starDetailData.school }}</div>
            </div>
          </div>
          <div class="row-two">
            <div class="row">
              <div class="title">影视作品</div>
              <div class="dian">：</div>
              <div class="text"></div>
            </div>
            <div class="row">
              <div class="title">官方网站</div>
              <div class="dian">：</div>
              <a :href="starDetailData.web" target="_blank" class="text">{{
                starDetailData.web
              }}</a>
            </div>
          </div>

          <p v-html="starDetailData.detail"></p>
        </div>
        <!-- <div class="play-btn">
          <el-image lazy src="../assets/images/tx.png" alt="" srcset="" />
          <el-image lazy src="../assets/images/iqiyi.png" alt="" srcset="" />
          <el-image lazy src="../assets/images/youku.png" alt="" srcset="" />
        </div> -->
        <!-- <div class="qr-code">
          <el-image
            lazy
            src="http://placehold.it/92x92&text=92x92"
            alt=""
            srcset=""
          />
          <p>用手机观看</p>
        </div> -->
      </div>
      <!-- 照片 -->
      <template v-if="starDetailData.images">
        <div class="block-7" v-if="starDetailData.images.length > 0">
          <div class="head">
            <div class="lf">照片</div>
            <!-- <router-link class="rt" to="">
            更多
            <el-image lazy src="../assets/images/jiantou-right.png" alt="" srcset="" />
          </router-link> -->
          </div>
          <div class="body">
            <swiper :options="swiperOptions" class="recommend">
              <swiper-slide
                v-for="(item, index) in starDetailData.images"
                :key="index"
              >
                <el-image lazy src="item" alt="" srcset="" />
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </template>
      <!-- 作品 -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-top: 80px"
      >
        <el-tab-pane label="电视剧" name="first">
          <div class="block-5">
            <div class="body">
              <router-link
                :to="{ name: 'channelDsjDetail', query: { id: item.id } }"
                v-for="(item, index) in tvData"
                :key="index"
              >
                <div class="img h370">
                  <el-image lazy :src="item.image" alt="" srcset="" />
                  <div class="time-grade">
                    <p class="time"></p>
                    <p class="grade">{{ item.score }}</p>
                  </div>
                </div>
                <h1>{{ item.title }}</h1>
                <p v-html="item.detail"></p>
              </router-link>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="电影" name="second">
          <div class="block-5">
            <div class="body">
              <router-link
                :to="{ name: 'channelDyDetail', query: { id: item.id } }"
                v-for="(item, index) in movieData"
                :key="index"
              >
                <div class="img h370">
                  <el-image lazy :src="item.image" alt="" srcset="" />
                  <div class="time-grade">
                    <p class="time"></p>
                    <p class="grade">{{ item.score }}</p>
                  </div>
                </div>
                <h1>{{ item.name }}</h1>
                <p v-html="item.detail"></p>
              </router-link>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="综艺" name="third">
          <div class="block-6">
            <div class="body">
              <router-link
                :to="{ name: 'channelZyDetail', query: { id: item.id } }"
                v-for="(item, index) in varietyData"
                :key="index"
              >
                <el-image lazy :src="item.image" alt="" srcset="" />
                <h1>{{ item.name }}</h1>
                <p>{{ item.show_time }}</p>
              </router-link>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="音乐" name="fourth">
          <div class="block-6">
            <div class="body">
              <router-link
                :to="{ name: 'single', query: { id: item.id } }"
                v-for="(item, index) in musicListData"
                :key="index"
              >
                <el-image lazy :src="item.image" alt="" srcset="" />
                <h1>{{ item.name }}</h1>
                <p>{{ item.show_time }}</p>
              </router-link>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 合作过的艺人 -->
      <div class="block-7" v-if="false">
        <div class="head">
          <div class="lf">合作过的艺人</div>
        </div>
        <div class="body">
          <router-link
            :to="{ name: 'star', query: { id: index } }"
            v-for="(item, index) in 14"
            :key="index"
          >
            <div class="img h236">
              <el-image
                lazy
                src="http://placehold.it/197x236&text=197x236"
                alt=""
                srcset=""
              />
            </div>
            <h1>林更新</h1>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 广告 -->
    <div class="ad">
      <a
        target="_blank"
        class="item"
        :href="item.url"
        v-for="(item, index) in adData.slice(0, 5)"
        :key="index"
      >
        <el-image lazy :src="item.image_mini" alt="" />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 照片
      swiperOptions: {
        slidesPerView: 7,
        spaceBetween: 36,
        freeMode: true,
      },
      activeName: "first",
      adData: [],
      starDetailData: [], //明星详情
      tvData: [], // 电视剧列表
      musicListData: [], // 音乐列表
      movieData: [], // 电影列表
      varietyData: [], //综艺列表
      keyword: "",
    };
  },
  created() {
    const name = this.$route.query.name;
    this.keyword = name;
    this.getStarDetail(name);
    // 广告
    this.$http.getAd().then((res) => {
      if (res.data.code === 0) {
        this.adData = res.data.data;
      } else {
        this.$message.error("获取失败，请重试！");
      }
    });
    this.getTv(this.keyword);
  },
  methods: {
    //明星详情
    getStarDetail(name) {
      let data = {
        name: name,
      };
      this.$http.getStarDetail(data).then((res) => {
        if (res.data.code === 0) {
          this.starDetailData = res.data.data[0];
        } else {
          this.$message.error("获取失败，请重试！");
        }
      });
    },
    //切换
    handleClick(tab, event) {
      // console.log(tab, event);
      // console.log(this.activeName);
      if (this.activeName === "first") {
        // 电视剧
        this.getTv(this.keyword);
      } else if (this.activeName === "second") {
        // 电影
        this.getMovie(this.keyword);
      } else if (this.activeName === "third") {
        // 综艺
        this.getVariety(this.keyword);
      } else if (this.activeName === "fourth") {
        // 音乐
        this.getMusicList(this.keyword);
      }
    },
    // 电视列表
    getTv(keyword) {
      let data = {
        keyword: keyword,
      };
      this.$http.getTv(data).then((res) => {
        if (res.data.code === 0) {
          this.tvData = res.data.data;
        } else {
          this.$message.error("请求失败，请重试！");
        }
      });
    },
    // 歌曲(音乐)列表
    getMusicList(keyword) {
      let data = {
        keyword: keyword,
      };
      this.$http.getMusicList(data).then((res) => {
        if (res.data.code === 0) {
          this.musicListData = res.data.data;
        } else {
          this.$message.error("获取失败，请重试！");
        }
      });
    },
    // 电影列表
    getMovie(keyword) {
      let data = {
        keyword: keyword,
      };
      this.$http.getMovie(data).then((res) => {
        if (res.data.code === 0) {
          this.movieData = res.data.data;
        } else {
          this.$message.error("获取失败，请重试！");
        }
      });
    },
    // 综艺列表
    getVariety(keyword) {
      let data = {
        keyword: keyword,
      };
      this.$http.getVariety(data).then((res) => {
        if (res.data.code === 0) {
          this.varietyData = res.data.data;
        } else {
          this.$message.error("获取失败，请重试！");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tabs__item {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .el-tabs__item.is-active {
    font-size: 18px;
    font-weight: bold;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__active-bar {
    height: 4px;
    background: #333333;
    border-radius: 20px;
  }
}
.h236 {
  height: 236px;
}
.h370 {
  height: 370px;
}
.center {
  width: 1600px;
  margin: 0 auto;
  .info {
    display: flex;
    justify-content: space-between;
    margin: 76px 0;
    position: relative;
    .lf {
      width: 460px;
      height: 610px;
      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .rt {
      width: 1110px;
      .row-two {
        display: flex;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 45px;
        .row {
          display: flex;
          width: 460px;
          .title {
            width: 100px;
            text-align-last: justify;
            text-align: justify;
            text-justify: distribute-all-lines;
            color: #999999;
          }
          .dian {
            color: #999999;
          }
          .text {
            width: 340px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .row-two:not(:first-child) {
        margin-top: 6px;
      }
      p {
        width: 1038px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40px;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
      }
    }
    .play-btn {
      position: absolute;
      top: 0;
      right: 280px;
      .el-image {
        width: 48px;
        height: 48px;
        cursor: pointer;
      }
      .el-image:not(:first-child) {
        margin-left: 55px;
      }
    }
    .qr-code {
      position: absolute;
      top: 0;
      right: 120px;
      width: 120px;
      text-align: center;
      .el-image {
        width: 92px;
        height: 92px;
      }
      p {
        width: 120px;
        height: 28px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 28px;
        color: #333333;
        text-align: center;
        margin-top: 8px;
      }
    }
  }
  .block-7 {
    margin-top: 20px;
    margin-bottom: 40px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      .lf {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .rt {
        height: 45px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40px;
        color: #666666;
        .el-image {
          width: 14.85px;
          height: 25.46px;
          margin-left: 10px;
        }
      }
    }
    .body {
      margin-top: 20px;
      a {
        display: inline-block;
        width: 197px;
        text-align: center;
        .el-image {
          width: 100%;
          height: 100%;
        }
        h1 {
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 40px;
          color: #333333;
        }
        p {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 25px;
          color: #999999;
        }
      }
    }
  }
  .block-7:last-child {
    .body {
      text-align: center;
      a:not(:nth-child(7n)) {
        margin-right: 36.8px;
      }
      a:not(:nth-child(1)),
      a:not(:nth-child(2)),
      a:not(:nth-child(3)),
      a:not(:nth-child(4)),
      a:not(:nth-child(5)),
      a:not(:nth-child(6)),
      a:not(:nth-child(7)) {
        margin-top: 20px;
      }
      h1 {
        margin-top: 10px;
      }
    }
  }
  .block-6 {
    margin-top: -40px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      .lf {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .rt {
        height: 45px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40px;
        color: #666666;
        .el-image {
          width: 14.85px;
          height: 25.46px;
          margin-left: 10px;
        }
      }
    }
    .body {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      a {
        display: inline-block;
        width: 246px;
        margin-bottom: 40px;
        .el-image {
          width: 246px;
          height: 164px;
          border-radius: 10px;
        }
        h1 {
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 45px;
          color: #333333;
          text-align: right;
          margin: 20px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #999999;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      a:not(:nth-child(6n)) {
        margin-right: 24px;
      }
    }
  }
  .block-5 {
    margin-top: -40px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      .lf {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .rt {
        height: 45px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40px;
        color: #666666;
        .el-image {
          width: 14.85px;
          height: 25.46px;
          margin-left: 10px;
        }
      }
    }
    .body {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      a {
        display: inline-block;
        width: 300px;
        margin-bottom: 25px;
        .img {
          position: relative;
          .time-grade {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 15px;
            padding-left: 10px;
            padding-right: 30px;
            display: flex;
            justify-content: space-between;
            font-family: PingFang SC;
            font-weight: 400;
            .time {
              font-size: 20px;
              color: #f5f5f5;
            }
            .grade {
              font-size: 22px;
              color: #ff6f00;
            }
          }
          .el-image {
            border-radius: 10px;
            width: 100%;
            height: 100%;
          }
        }
        h1 {
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 45px;
          color: #333333;
          text-align: right;
          margin: 20px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #999999;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      a:not(:nth-child(5n)) {
        margin-right: 25px;
      }
    }
  }
}
.ad {
  position: fixed;
  top: 150px;
  right: 100px;
  z-index: 1000;
  .item {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 15px;
    overflow: hidden;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .item:not(:first-child) {
    margin-top: 30px;
  }
}
</style>